<template>
	<scroll-view scroll-y class="scroll" @scrolltolower="onreachBottom">
		<view class="bingCard" v-if="deviceList.length==0" @click="showBing = true;">请先绑定设备</view>
		<view v-for="item in deviceList">
			<u-card @click="headClick(item.deviceId)" @foot-click.stop="!headClick" class="card">
				<template v-slot:head>
					<view class="head">
						<u-tag :text="`${item.deviceId} ${item.deviceName}`" type="success" />
						<view class="battery-container">
							<text>{{ item.battery }}%</text>
							<view class="battery-icon">
								<view class="battery-level" :style="{ width: item.battery + '%' }"></view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:body>
					<view class="contentBody">
						<text>流速：{{ item.flow }}mL/min</text>
						<text>压力：{{ item.press }}psig</text>
					</view>

				</template>
				<template v-slot:foot>
					<u-swipe-action :show="item.showMeun" @click="menuClick" :options="options" :index="item.deviceId"
						btn-width="120">
						<view class="foot">
							<u-icon :name="iconPath" size="32" color="" :label="iconTxt" @click="iconClick"></u-icon>
							<u-tag :text="`状态：${getStatusText(item.status,item.setFlow,item.setTime)}`"
								:type="getStatusType(item.status)" />
						</view>
					</u-swipe-action>
				</template>
			</u-card>
		</view>
		<u-loadmore :status="statusMore" icon-type="flower" v-if="deviceList.length>2" />
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</scroll-view>
	<u-modal v-model="showBing" title="绑定设备" :title-style="{color: 'red'}" @confirm="bindDevice" ref="uModal1"
		:async-close="true" :show-cancel-button="true">
		<view class="slot-content" style="margin-right: 5rpx;">
			<u-field label-width="140" v-model="deviceCode" label="设备校验码:" placeholder="请扫码或输入校验码" right-icon="scan"
				@right-icon-click="scanDevice" style="font-size: 12rpx;" :fieldStyle="fieldStyle"
				:placeholderStyle="holderStyle">
			</u-field>
		</view>
	</u-modal>
	<u-modal v-model="showDataInput" title="输入数据名称" :title-style="{color: 'red'}" @confirm="readData" ref="uModal2"
		:async-close="true" :show-cancel-button="true">
		<view class="slot-content" style="margin-right: 10rpx;">
			<u-field label-width="150" v-model="dataName" label="数据名称:" placeholder="请输入数据名称">
			</u-field>
		</view>
	</u-modal>
</template>

<script>
	export default {
		data() {
			return {
				fieldStyle: {
					'font-size': '24rpx',
				},
				holderStyle: '',
				deviceCode: '',
				selectID: '',
				showBing: false,
				showDataInput: false,
				dataName: '',
				scrollTop: 0,
				msglist: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				deviceList: [{
					deviceId: '',
					deviceName: '实验室I',
					status: -1,
					battery: 30,
					flow: 15.5,
					press: -14.7,
					setFlow: 43.2,
					setTime: 1.0,
					showMeun: false
				}],
				iconPath: 'reload', //'/static/imgs/onMachine.png',
				iconTxt: '刷新',
				statusMore: 'loadmore',
				pageSize: 3,
				pageIndex: 1,
				options: [{
						text: '详情',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '设置',
						style: {
							backgroundColor: '#dd524d'
						}
					},
					{
						text: '数据',
						style: {
							backgroundColor: '#5dba00'
						}
					},
					{
						text: '解绑',
						style: {
							backgroundColor: '#747400'
						}
					}
				],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			console.log(e.scrollTop)
		},
		onNavigationBarButtonTap() {
			this.showBing = true;
			console.log('点击右上角')
		},
		onReady() {
			this.$checkLogin();
		},
		onShow() {
			this.getBindData();
		},
		methods: {
			readData() {
				setTimeout(() => {
					this.$u.route({
						url: 'pages/device/data',
						params: {
							deviceId: this.selectID,
							dataName: this.dataNam
						}
					})
					// 3秒后自动关闭
					this.showDataInput = false;
				}, 3000)
			},
			getBindData() {
				this.$request('Device/getDevicesByUserCode', 'GET', {
					"userCode": this.$globalState.S1600Info.UserCode,
					"deviceType": this.$globalState.S1600Info.deviceType,
					"query": "null",
					"pageSize": this.pageSize
				}).then(res => {
					console.log(res)
					this.deviceList = [];
					res.data.forEach((t) => {
						this.deviceList.push({
							deviceId: t.deviceId,
							deviceName: t.backup2 == null ? `默认名称${t.deviceId}` : t.backup2,
							status: -1,
							battery: null,
							flow: null,
							press: null,
							setFlow: null,
							setTime: null,
							showMeun: false
						})
					})
				})
			},
			bindDevice() {
				this.$request(
					`Device/bindDevices`,
					'POST', {
						"userCode": this.$globalState.S1600Info.UserCode,
						"deviceType": this.$globalState.S1600Info.deviceType,
						"qrCode": this.deviceCode
					}).then(res => {
					console.log(res)
					this.$u.toast(res.message);
					this.getBindData();
					this.showBing = false;
				}).catch(error => {
					this.$u.toast('绑定失败,请联系管理员')
					this.showBing = false;
					console.log(error)
				})
			},
			scanDevice() {
				// #ifdef H5
				this.$u.toast('请输入校验码');
				// #endif

				// #ifdef APP
				uni.scanCode({
					success: function(res) {
						this.deviceCode = res.result;
					}
				})
				// #endif
				console.log('绑定设备')
			},
			menuClick(ID, menuIndex) {
				switch (menuIndex) {
					case 0:
						uni.navigateTo({
							url: `/pages/device/detail?deviceId=${ID}`,
						});
						break;
					case 1:
						uni.navigateTo({
							url: `/pages/device/setting?deviceId=${ID}`,
						});
						break;
					case 2:
						this.selectID = ID;
						this.showDataInput = true;
						break;
					case 3:
						break;
				}
				console.log(`设备ID：${ID}|${menuIndex}`)
			},
			onreachBottom() {

				console.log('到达底部')
				this.statusMore = 'loading';
				uni.showLoading({
					title: "数据加载中...",
					mask: true
				});
				setTimeout(() => {
					uni.hideLoading()
					this.statusMore = 'nomore'
				}, 2000);
			},
			iconClick() {
				console.log('点击图标')
			},
			getStatusType(status) {
				switch (status) {
					case 0:
						return 'primary';
					case 1:
					case 2:
						return 'success';
					case 3:
						return 'error';
					case 4:
						return 'warning';
					default:
						return "info";
				}
			},
			getStatusText(status, setFlow, setTime) {
				var setInfo = `[${setFlow}mL/min ${setTime}h]`;
				switch (status) {
					case 0:
						return '空闲中';
					case 1:
						return `等待中${setInfo}`;
					case 2:
						return `运行中${setInfo}`;
					case 3:
						return `采样完成${setInfo}`;
					case 4:
						return '离线';
					default:
						return "休眠中";
				}
			},
			headClick(ID) {
				console.log('头部')
				var device = this.deviceList.find(t => t.deviceId == ID);
				device.showMeun = !device.showMeun;
			}
		}

	};
</script>

<style>
	.scroll {
		width: 100%;
		height: calc(92vh - var(--window-top));
		/* border: 1rpx solid #ff0000; */
	}

	.bingCard {
		background-color: #c3c3c3;
		height: 200rpx;
		margin: 10rpx 30rpx;
		text-align: center;
		line-height: 200rpx;
		border-radius: 20rpx;
	}

	.Top {
		position: fixed;
	}

	.card {
		border: 4rpx solid #bfbfbf;
		border-radius: 10rpx;
	}

	.head,
	.contentBody,
	.foot {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* height: 40rpx; */

	}

	.battery-container {
		display: flex;
		align-items: center;
	}

	.battery-icon {
		width: 48rpx;
		height: 24rpx;
		border: 2rpx solid #000;
		position: relative;
		margin-left: 10rpx;
	}

	.battery-level {
		height: 100%;
		background-color: green;
		/* 可以根据电量百分比动态设置颜色 */
	}
</style>